<template>
  <div>
    <van-nav-bar title="黑马头条-登录" />
    <div>
      <!-- 整体表单组件 -->
      <van-form @submit="onSubmit">
        <!-- 输入框表单项 -->
        <van-field
          v-model="user.mobile"
          name="mobile"
          required
          label="手机号"
          placeholder="请输入11位手机号"
          :rules="[{ required: true, message: '请填写手机号',pattern:/^1[3-9]\d{9}$/ }]"
        />
        <van-field
          v-model="user.code"
          type="password"
          required
          name="code"
          label="密码"
          placeholder="请输入六位密码"
          :rules="[{ required: true, message: '请填写密码',pattern:/^\d{6}$/ }]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
          :loading="isloading" :disabled="isloading" loading-text="正在登录ing...">登录</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { loginAPI } from '@/api'
import { Notify } from 'vant'
import { setToken } from '@/utils/token'
export default {
  name: 'Login',
  components: {

  },
  data () {
    return {
      user: {
        mobile: '17324835555', // 手机号
        code: '246810' // 验证码（密码-必须是246810后台）
      },
      isloading: false
    }
  },
  methods: {
    // 提交方法
    async onSubmit (values) {
      // console.log('submit', values)
      // console.log(this.user)

      //  const res = await loginAPI({
      //   mobile:this.user.mobile,
      //   code:this.user.code
      //   或者...this.user
      // })
      this.isloading = true
      try {
        const res = await loginAPI(this.user)
        console.log(res)
        Notify({ type: 'success', message: '登陆成功啦！！！' })
        setToken(res.data.data.token)
        // 跳转一定要写到最后
        // this.$router.push()压栈（会产生历史记录，可以回蜕）
        // this.$router.replace()替换（不会会产生历史记录）

        this.$router.replace('/Layout/home')
      } catch (error) {
        Notify({ type: 'danger', message: '账号或密码错误' })
      }
      this.isloading = false// 网络请求完成
    }
  }
}
</script>

<style scoped lang="less">
//在vue.config.js里写了
/* 此类名是van-nav-bar组件内根标签 */
// .van-nav-bar{
//   background-color: #007bff;
// }
// 此选择器是.van-nav-bar组件内标签
// scoped尝试把此选择器后属性选择器匹配当前页面标签（选不中组件内部的）
// /deep/会把属性选择器加到前面
// /deep/ .van-nav-bar__title{
//   color: white;
// }
</style>
